<template>
  <el-container class="second-container">
    <el-aside width="200px"> <Menu :menu-style="data.menuStyle" :menus="menus" /> </el-aside>
    <el-main>
      <common-title />
      <router-view />
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
  import { reactive, computed } from 'vue';
  import CommonTitle from '@/components/CommonTitle.vue';
  import Menu from '@/components/common-menu/Menu.vue';
  import { asideMenu } from '@/menus';

  import { useRoute } from 'vue-router';
  const route = useRoute();

  const data = reactive({
    menuStyle: { backGroundColor: '#fff', textColor: '#000', activeColor: '#15559a' },
  });

  const menus = computed(() => {
    return (asideMenu as any)[route.path.split('/')[1]];
  });
</script>

<style lang="scss" scoped>
  .second-container {
    height: calc(100% - 70px) !important;
  }

  .el-aside {
    background: #fff;
    padding-top: 20px;
  }
</style>
